import Taro, { Component } from '@tarojs/taro'
import { View, Button} from '@tarojs/components'
import { AtInput, AtToast } from 'taro-ui'
import { Header } from '../common/header';
import '../../icon.scss';
import '../common/header.scss';
import './bind.scss';

export class BindMobile extends Component {
  constructor(){
    super();
    this.state = {
      user:null,
      mobile:'',
      vcode:'',
      btnText:'获取验证码',
      disBtnClick:true,
      btnLoading:false,
      discodeBtn: false,
      toast:{
        open:false,
        status:'success',
        text:'绑定成功'
      },
    }
  }
  componentWillMount () { }

  componentDidMount () { 
    let user = Taro.getStorageSync('user');
    this.setState({
      user:user
    });
  }

  onClickLeftIcon(){
    Taro.navigateBack();
  }

  handleMobileChange(value){
    if(this.state.mobile && this.state.vcode){
      this.setState({
        disBtnClick: false
      });
    }

    this.setState({
      mobile: value
    });
  }

  handleVcodeChange(value){
    if(this.state.mobile && this.state.vcode){
      this.setState({
        disBtnClick: false
      });
    }
    this.setState({
      vcode: value
    });
  }

  handleSubmit(){
    let that = this;
    let user = Taro.getStorageSync('user');
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/user/bind/mobile',
      data:{
        mobile: that.state.mobile,
        code : that.state.vcode,
        token: user.token
      },
      method: 'POST',
      success:(res) => {
        if(res.statusCode === 200){
          console.log(res.data);
          if(res.data.status === "SUCCESS"){
            that.setState({
              toast:{
                open:true,
                status:'success',
                text:'绑定成功'
              }
            });
            Taro.navigateBack();
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }


  count = () => {
    let timer = 60;
    let siv = setInterval(() => {
        this.setState({ timer: (timer--), btnText: timer, discodeBtn: true }, () => {
            if (timer === 0) {
                clearInterval(siv);
                this.setState({ btnText: '重新发送', discodeBtn: false })
            }
        });
    }, 1000);
  }

  handleVcodeClick(){
    let that = this;
    let user = Taro.getStorageSync('user');
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/tool/sms/check-code',
      data:{
        mobile: this.state.mobile,
        token: user.token
      },
      method: 'POST',
      success:(res) => {
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            that.count();
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }

  render () {
    return (
      <View className='bind-box'>
        <AtToast
          isOpened={this.state.toast.open}
          status={this.state.toast.status}
          text={this.state.toast.text}
          ></AtToast>
        <Header 
          title='绑定手机号'
          leftIconType='chevron-left' 
          onClickLeftIcon={this.onClickLeftIcon}
          ></Header>
          <View className='bind-user'>
            <View className='bind-user-image'>
                <Image src={this.state.user.headimgurl} mode='widthFix' />
            </View>
            <View className='bind-user-name'>{this.state.user.nick_name}</View>
            <View className='bind-user-notice'>*为了您的账号安全  请您绑定您的手机号*</View>
          </View>

          <View className='bind-input'>
            <AtInput
              name='mobile'
              type='text'
              placeholder='请输入您的手机号'
              value={this.state.mobile}
              onChange={this.handleMobileChange.bind(this)}
            />
          </View>
          <View className='bind-input bind-input-vcode'>
            <AtInput
              name='vcode'
              type='text'
              placeholder='请输入您的验证码'
              value={this.state.vcode}
              onChange={this.handleVcodeChange.bind(this)}
            />
            <View onClick={this.handleVcodeClick.bind(this)} className='bind-input-vcode-button'>{this.state.btnText}</View>
          </View>
          <View className='bind-button'>
            <Button loading={this.state.btnLoading} className='bind-button-item' disabled={this.state.disBtnClick} onClick={this.handleSubmit}>提交</Button>
          </View>
      </View>
    )
  }
}